<template>
  <div>
    <div style="margin-top: 30px">
      <el-form
        :model="listQuery"
        ref="productForm"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="用户名">
          <el-input
            v-model="listQuery.username"
            style="width: 200px"
            placeholder="请输入用户名查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="IP地址">
          <el-input
            v-model="listQuery.ip"
            style="width: 200px"
            placeholder="请输入IP查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="登录地址">
          <el-input
            v-model="listQuery.location"
            style="width: 200px"
            placeholder="请输入登录地址查询"
          ></el-input>
        </el-form-item>
       
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
          <el-button icon="el-icon-delete" @click="handleSelectDel">批量</el-button>

      </el-form>
    </div>
  
    <!-- 表格 -->
    <el-table border 
    :data="loginLogList" 
    ref="multipleTable" 
    style="width:1500px;margin:20px auto"
      @selection-change="handleSelectionChange"
    >
         <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column label="ID"
                      type="index"
                      width="50">
                    </el-table-column>
      <el-table-column label="登入用户" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.username }}
        </template>
      </el-table-column>
      <el-table-column label="登录时间" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.loginTime }}
        </template>
      </el-table-column>
      <el-table-column label="登录地点" align="center" width="300">
        <template slot-scope="scope">
          {{ scope.row.location}}
        </template>
      </el-table-column>
      <el-table-column label="IP地址" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.ip }}
        </template>
      </el-table-column>
      <el-table-column label="操作系统" align="center" width="150">
        <template slot-scope="scope">
          {{ scope.row.userSystem }}
        </template>
      </el-table-column>
      <el-table-column label="浏览器" align="center" width="200">
        <template slot-scope="scope">
          {{ scope.row.userBrowser }}
        </template>
      </el-table-column>
     
 
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
          
          <el-button size="mini" type="text" @click="handleDelete(scope.row.id)" icon="el-icon-delete">删除</el-button>
         
        </template>
      </el-table-column>
    </el-table>
                    <!-- 分页区域 -->
        <div class="pagination-container" style="margin-right:60px">
            <el-pagination
                    layout="total,sizes,prev, pager, next,jumper"
                    :total="total"
                    :page-size="listQuery.pageSize"
                    :current-page="listQuery.pageNum"
                    :page-sizes="[5,10,15]"
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
            >
            </el-pagination>
        </div>
  </div>
</template>

<script>
let defaultQuery = {
 
 
  username: "", //用户名
  ip:"",
  
  location:"",
   pageSize:5,
      pageNum:1,
  
};
export default {
  data(){
    return {
      listQuery: Object.assign({}, defaultQuery),
      departmentOptions: [{ id: 1, label: "物资管理部" }],
      loginLogList: [],
      total:10,
      ids:[]
     
    };
  },
 created(){
   this.getloginLogList()
 },
 filters:{
   sex(value){
     if(value===0){
       return "女"
     }else if(value===1){
       return "男"
     }
   }
 },
  methods:{
    //是否禁用按钮的切换
  handleShowchange() {},
  //请求表格列表
  async getloginLogList(){
     let res =  await this.$http.get("/loginLog/findLoginLogList",{params:this.listQuery});
     console.log(res)
     if(res.status===200){
       this.loginLogList = res.data.data.rows
       this.total = res.data.data.total
       this.$message.success("用户管理列表请求成功")
     }else{
       this.$message.warning("用户管理列表请求失败")
     }
     console.log(res)
  },
       //页码变化
   handlePageChange(val){
       this.listQuery.pageNum = val
       this.getloginLogList()
     },
     //点击一页显示多少条
     handleSizeChange(val){
      this.listQuery.pageSize = val
      this.listQuery.pageNum = 1
      this.getloginLogList()
     },
     //顶部搜索功能
     handleSearch(){
        this.getloginLogList()
     },
     //删除 
     handleDelete(id){
        this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
       let res =  await this.$http.delete("loginLog/delete/"+id);
      if(res.data.code===200){
        this.$message.success("删除成功")
        this.getloginLogList()
      }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     },
     handleSelectionChange(val){
       console.log(val)
       this.ids=[]
       val.forEach(item => {
         
          this.ids.push(item.id)
       });
      
     },
     //批量删除
     async handleSelectDel(){
        let res =  await this.$http.delete("/loginLog/batchDelete/"+this.ids);
        console.log(res)
        if(res.data.code===200){
          this.getloginLogList()
          this.$message.success("批量删除成功")
        }else{
          this.$message.warning(res.data.msg)
        }
     }
  }
};
</script>

<style lang="less" scoped>
</style>

